front end About vue+element ui to upload files html Determine the type of uploaded file But I encountered a problem at this time. I don't know why the .xls file type is blank in the console, which makes the .xls file fail to pass the judgment. So another method is us... front end [ KDT] 핀테크 서비스프론트앤드 개발자 - TIL #4 문자 (String) 숫자 (Number) 불린 (Boolean) Null Undefined 심볼 (Symbol) 배열 (Array) 객체 (Object) 함수 (Function) 문자 숫자 Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후, 그 값을 문자열로 반환합니다. 소숫점 숫자 날리기 Not-A-Number - 숫자 데이터 / 숫자로 표시 불가! 불린(Boolead... KDT 핀테크 서비스 프론트앤드front endJavaScriptTILJavaScript CSS 실무 테크닉 스타일링이 까다로운 input요소를 화면에서 숨기고 label 요소 연결하여 커스텀 select 박스 대신 button, ul, li 를 이용하여 커스텀 ✔ input 커스텀 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보 전달 텍스트를 숨겨두는 방법 ✔ 카카오가 사용하는 방법 (PC) 이미지내 의미있는 텍스트의 대체텍스트 제공 (Mobile) 이미지내 의미있는 텍스트의 대체텍... 멋쟁이사자처럼front endCSSCSS [ KDT] 핀테크 서비스프론트앤드 개발자 - TIL #3 A라는 상태가 B라는 상태로 변환되는 모습을 보여 준다. property, duration, timing-function, delay 순으로 작성한다. 전환효과를 부여할 때 가상클래스에 부여하지 않고 요소 자체에 부여한다! transition 속성보다 조금 더 세밀한 변환(애니메이션) 작업을 진행할 수 있다. 다수의 스타일을 세트로 변환시킬 수 있다. animation: animation-n... KDT 핀테크 서비스 프론트앤드front endTILCSSCSS 흐르는 텍스트 구현하기 화면상에서 텍스트가 왼쪽으로 무한히 흐르는 것을 구현해보자. 호버(hover) 했을 때는 텍스트 색이 진해지면서 흐르던 것이 멈춘다. 일단 html 구조는 아래와 같다. 화면상에서 무한으로 흐르는 텍스트를 구현하기 위해서 해당 텍스트를 감싼 div.flow-wrap 태그를 여러개 만들었다. 물론 반복되는 텍스트의 길이에 따라 갯수가 더 추가되거나 줄어들 수 있다. div.flow-contai... CSSflow-textfront endanimationCSS [JS] 스크롤 감지 이벤트 현재 스크롤 되고 있는 부분에 맞춰서 헤더 제목이 포커싱되는 효과를 넣고 싶었다. 처음에는pageYOffset의 값(이하 posY)이 특정 숫자 범위안에 있을때, 각각의 제목이 포커싱 되도록 했다. 위 사진으로 예를 들자면, posY가 0<= posY < 100의 값이면 헤더의 home이 포커싱 되고 100<= posY < 200이면 about이 포커싱되는 방식이었다. 이 방식은 화면 크기가... JavaScriptfront endJavaScript hook_LayoutEffets 란? 깃허브에 저장 된 hook-flow라는 프로젝트를 저장해 보았다. useLayoutEffect useEffect uselayoutEffect와 useEffect와 동일한 형태를 가진다. uselayoutEffect와 useEffect 차이점 useEffect 훅을 사용할 경우 DOM의 레이아웃 배치와 페이트가 끝난 후 이펙트 함수를 호출한다. 따라서 상태값이 effect에 의존할 경우 약간 ... Reacthookfront endReact [Front-End] HTML & CSS CSS : 꾸미기 : 웹 브라우저, 페이지의 권고안 -> W3C validator로 웹 표준에 부합하는지 검사 가능 2) 웹 접근성 연구소 : 개발자들의 웹 콘텐츠 접근성 지침 ex) 한국어 패치, beautify, live server(얜 이미 하고 있었음) >> 비트맵 vs 벡터 1) 비트맵 : 픽셀이 모여진 이미지로, 화면에 렌더링 되는 형식으로 출력 ex) jpg, png, gif 2... CSSfront endhtmlCSS localStorage vs. sesseionStorage localStorage 라는 개념에 마주하게 되었다. sessionStorage 라는 개념을 비교하면서 정리해보고자 한다. web storage 개념을 알아야 한다. ✔️ web storage 웹 스토리지 (web storage) 는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 기본적으로 키 (key) 와 값 (value) 으로 이루어진 데이터를 저장할 수 있다. ⚠️ Da... JavaScriptfront endJavaScript vue.js__Vue Router 대체로 경로는 router > index.vue파일에 몰아놓고, 각 페이지마다 필요한 router-link to='' 넣어 필요한 버튼 만들고 어짜피 화면 변환은 페이지 하나에서 router-view해주면 됨. : router 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식. ( vue공식 홈페이지 docs에도 없고, 거... 네임드 뷰vue네스티드 라우터router라우터front endvue.jsfront end TIL 14 | 배열 (Array) 첫 번째 방식은 new Array()라는 키워드로 배열을 선언하는 것이며, 두 번째는 []의 대괄호를 이용해서 선언하는 방식인데, 보통 두 번째 방식이 더 흔하게 사용된다. 두 번째 배열에서 총 길이가 2인 배열을 만들었으며 이 배열은 index no.라는 것을 가지는데, 0번째 index에는 숫자 1이, 1번째 index에는 숫자 2가 들어있다고 이해하면 된다. 각 숫자는 index no.... TILJavaScriptfront endJavaScript React 컴포넌트 반복 컴포넌트 반복 6.1 자바스크립트 배열의 map() 함수 JS 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 반환한 후 결과로 새로운 배열을 생성. 6.1.1 문법 callback: 새로운 배열의 요소를 생헝하는 함수로 파라미터는 3가지 있다. currentVal... Reactfront endReact TIL 21 | DOM(Document Object Model) DOM이란 Document Object Model의 약자로서, 웹 페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object)모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다. 즉, DOM은 HTML인 웹 페이지와 스크립팅 언어인 JavaScript를 연결하는 역할을 수행한다. 그럼 구체적으로 어떻게 JavaScript는 HTML에 접근할 ... JavaScriptDOMTILfront endhtmlDOM 강의 3주차 정리 #3 그럼 이제 우리 클래스에서 데이터를 다루기 위해 사용하는 툴은 무엇인가. .mongoDB ex) MongoDB 앞서 기술한 것처럼 딕셔너리 형태로 데이터를 저장한다는 부분이 정말 중요한 포인트다. 그럼 mongoDB에서 데이터를 생성하려면 어떻게 해야할까? 여기서 이제 users라는 collection에 데이터를 생성해줄텐데 python에서 딕셔너리를 생성해주던 것처럼 생성하면 된다. ins... robo3tpythonCSSback end스파르타front endhtmlCSS
About vue+element ui to upload files html Determine the type of uploaded file But I encountered a problem at this time. I don't know why the .xls file type is blank in the console, which makes the .xls file fail to pass the judgment. So another method is us... front end [ KDT] 핀테크 서비스프론트앤드 개발자 - TIL #4 문자 (String) 숫자 (Number) 불린 (Boolean) Null Undefined 심볼 (Symbol) 배열 (Array) 객체 (Object) 함수 (Function) 문자 숫자 Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후, 그 값을 문자열로 반환합니다. 소숫점 숫자 날리기 Not-A-Number - 숫자 데이터 / 숫자로 표시 불가! 불린(Boolead... KDT 핀테크 서비스 프론트앤드front endJavaScriptTILJavaScript CSS 실무 테크닉 스타일링이 까다로운 input요소를 화면에서 숨기고 label 요소 연결하여 커스텀 select 박스 대신 button, ul, li 를 이용하여 커스텀 ✔ input 커스텀 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보 전달 텍스트를 숨겨두는 방법 ✔ 카카오가 사용하는 방법 (PC) 이미지내 의미있는 텍스트의 대체텍스트 제공 (Mobile) 이미지내 의미있는 텍스트의 대체텍... 멋쟁이사자처럼front endCSSCSS [ KDT] 핀테크 서비스프론트앤드 개발자 - TIL #3 A라는 상태가 B라는 상태로 변환되는 모습을 보여 준다. property, duration, timing-function, delay 순으로 작성한다. 전환효과를 부여할 때 가상클래스에 부여하지 않고 요소 자체에 부여한다! transition 속성보다 조금 더 세밀한 변환(애니메이션) 작업을 진행할 수 있다. 다수의 스타일을 세트로 변환시킬 수 있다. animation: animation-n... KDT 핀테크 서비스 프론트앤드front endTILCSSCSS 흐르는 텍스트 구현하기 화면상에서 텍스트가 왼쪽으로 무한히 흐르는 것을 구현해보자. 호버(hover) 했을 때는 텍스트 색이 진해지면서 흐르던 것이 멈춘다. 일단 html 구조는 아래와 같다. 화면상에서 무한으로 흐르는 텍스트를 구현하기 위해서 해당 텍스트를 감싼 div.flow-wrap 태그를 여러개 만들었다. 물론 반복되는 텍스트의 길이에 따라 갯수가 더 추가되거나 줄어들 수 있다. div.flow-contai... CSSflow-textfront endanimationCSS [JS] 스크롤 감지 이벤트 현재 스크롤 되고 있는 부분에 맞춰서 헤더 제목이 포커싱되는 효과를 넣고 싶었다. 처음에는pageYOffset의 값(이하 posY)이 특정 숫자 범위안에 있을때, 각각의 제목이 포커싱 되도록 했다. 위 사진으로 예를 들자면, posY가 0<= posY < 100의 값이면 헤더의 home이 포커싱 되고 100<= posY < 200이면 about이 포커싱되는 방식이었다. 이 방식은 화면 크기가... JavaScriptfront endJavaScript hook_LayoutEffets 란? 깃허브에 저장 된 hook-flow라는 프로젝트를 저장해 보았다. useLayoutEffect useEffect uselayoutEffect와 useEffect와 동일한 형태를 가진다. uselayoutEffect와 useEffect 차이점 useEffect 훅을 사용할 경우 DOM의 레이아웃 배치와 페이트가 끝난 후 이펙트 함수를 호출한다. 따라서 상태값이 effect에 의존할 경우 약간 ... Reacthookfront endReact [Front-End] HTML & CSS CSS : 꾸미기 : 웹 브라우저, 페이지의 권고안 -> W3C validator로 웹 표준에 부합하는지 검사 가능 2) 웹 접근성 연구소 : 개발자들의 웹 콘텐츠 접근성 지침 ex) 한국어 패치, beautify, live server(얜 이미 하고 있었음) >> 비트맵 vs 벡터 1) 비트맵 : 픽셀이 모여진 이미지로, 화면에 렌더링 되는 형식으로 출력 ex) jpg, png, gif 2... CSSfront endhtmlCSS localStorage vs. sesseionStorage localStorage 라는 개념에 마주하게 되었다. sessionStorage 라는 개념을 비교하면서 정리해보고자 한다. web storage 개념을 알아야 한다. ✔️ web storage 웹 스토리지 (web storage) 는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 기본적으로 키 (key) 와 값 (value) 으로 이루어진 데이터를 저장할 수 있다. ⚠️ Da... JavaScriptfront endJavaScript vue.js__Vue Router 대체로 경로는 router > index.vue파일에 몰아놓고, 각 페이지마다 필요한 router-link to='' 넣어 필요한 버튼 만들고 어짜피 화면 변환은 페이지 하나에서 router-view해주면 됨. : router 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식. ( vue공식 홈페이지 docs에도 없고, 거... 네임드 뷰vue네스티드 라우터router라우터front endvue.jsfront end TIL 14 | 배열 (Array) 첫 번째 방식은 new Array()라는 키워드로 배열을 선언하는 것이며, 두 번째는 []의 대괄호를 이용해서 선언하는 방식인데, 보통 두 번째 방식이 더 흔하게 사용된다. 두 번째 배열에서 총 길이가 2인 배열을 만들었으며 이 배열은 index no.라는 것을 가지는데, 0번째 index에는 숫자 1이, 1번째 index에는 숫자 2가 들어있다고 이해하면 된다. 각 숫자는 index no.... TILJavaScriptfront endJavaScript React 컴포넌트 반복 컴포넌트 반복 6.1 자바스크립트 배열의 map() 함수 JS 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 반환한 후 결과로 새로운 배열을 생성. 6.1.1 문법 callback: 새로운 배열의 요소를 생헝하는 함수로 파라미터는 3가지 있다. currentVal... Reactfront endReact TIL 21 | DOM(Document Object Model) DOM이란 Document Object Model의 약자로서, 웹 페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object)모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다. 즉, DOM은 HTML인 웹 페이지와 스크립팅 언어인 JavaScript를 연결하는 역할을 수행한다. 그럼 구체적으로 어떻게 JavaScript는 HTML에 접근할 ... JavaScriptDOMTILfront endhtmlDOM 강의 3주차 정리 #3 그럼 이제 우리 클래스에서 데이터를 다루기 위해 사용하는 툴은 무엇인가. .mongoDB ex) MongoDB 앞서 기술한 것처럼 딕셔너리 형태로 데이터를 저장한다는 부분이 정말 중요한 포인트다. 그럼 mongoDB에서 데이터를 생성하려면 어떻게 해야할까? 여기서 이제 users라는 collection에 데이터를 생성해줄텐데 python에서 딕셔너리를 생성해주던 것처럼 생성하면 된다. ins... robo3tpythonCSSback end스파르타front endhtmlCSS